<template>
  <div id='views'>
    <ul>
      <li v-for="(item,index) in list">
        <router-link :to='{ path:"/announcement_detail",query:{ content:item.content } }'>
          <p class="title">{{item.title}}</p>
          <p class="time">{{item.create_time}}</p>
          <img src="../../common/imgs/arrowright.png" alt="" class="aright">
        </router-link>
      </li>
    </ul>
    <p class="loadToast" v-if="showLoad">{{loadToastInfo}}</p>
  </div>
</template>

<script>
  import { noticeList } from '../../http/api';
  export default {
    name: 'announcement_list',
    data() {
      return {
        introduce: '公告列表',
        list:[],
        curPage:0,
        totalPage:1,
        showLoad : true,
        loadToastInfo : '加载中...',
        acceptLoad : false,//底部加载更多限制
      }
    },
    methods:{
      setLoadInfo(){
        let thiz = this;
        let curPage = this.curPage;
        let totalPage = this.totalPage;
        let list = this.list;
        if( curPage == 1 && totalPage == 1 && list.length == 0){
          this.loadToastInfo = '暂无更多公告...';
          return;
        }
        if( curPage == totalPage ){
          this.loadToastInfo = '到底了...';
        }
      },
      loadList(){
        let thiz = this;
        if( thiz.curPage < thiz.totalPage ){
          let page = thiz.curPage + 1;
          thiz.loadToastInfo = '加载中...';
          thiz.acceptLoad = false;
          noticeList({ page : page , pageSize : 15 , release_location : 1 , type : 1 }).then(res => {
            if( res.code == 200 ){
              thiz.curPage++;
              thiz.acceptLoad = true;
              let data = res.data;
              let list = data.list;
              thiz.list = thiz.list.concat( list );
              thiz.totalPage = data.total_page;
              thiz.setLoadInfo();
            }
          })
        }
      },
      loadMore(){
        let thiz = this;
        thiz.toBottom(function(){
          if( thiz.acceptLoad ){
            thiz.loadList()
          }
        });
      },
    },
    mounted(){
      let thiz = this;
      thiz.loadList();
      window.addEventListener('scroll',thiz.loadMore,true);
    },
    beforeDestroy() {
      let thiz = this;
      window.removeEventListener('scroll', thiz.loadMore , true);
    }
  }
</script>

<style type="text/less" lang='less' scoped>
  #views{
    padding: 0 0.3rem;padding-top: 0.4rem;padding-bottom: 0.5rem;
    li{
      padding:0 0.27rem;background: #fff;border-radius: 0.04rem;position: relative;margin-top: 0.24rem;
      >a{
        display: inline-block;width: 100%;text-align: left;
      }
      .aright{
        position: absolute;right:0.27rem;top:0.38rem;width:.15rem;
      }
      .title{
        font-size: 0.3rem;padding-top: 0.33rem;display: inline-block;width: calc( 100% - 0.6rem );overflow: hidden;
        overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
      }
      .time{
        font-size: 0.24rem;color: #898989;padding-top: 0.18rem;padding-bottom: 0.33rem;
      }
    }
    li:first-child{
      margin-top: 0;
    }
  }
</style>
